<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/user/login.css?v={{ layui.admin.v }}-1" media="all">
</script>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class='content'>
        <div class='login-content'>
            <div class="layadmin-user-login-main">
                <!--登陆-->
                <div class="container">
                    <div class="layadmin-user-login-box layadmin-user-login-header">
                        <h2 class='login-content-title'>登录</h2>
                    </div>
                    <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                        <div class="layui-form-item">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-shouji"
                                   for="LAY-user-login-name"></label>
                            <input type="text" name="username" id="LAY-user-login-name" lay-verify="required"
                                   placeholder="账号" class="layui-input">
                        </div>
                        <div class="layui-form-item">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                                   for="LAY-user-login-password"></label>
                            <input type="password" name="password" id="LAY-user-login-password" lay-verify="required"
                                   placeholder="密码" class="layui-input">
                        </div>
                        <!-- <div class="layui-form-item"> -->
                        <!-- <div class="layui-row"> -->
                        <!-- <div class="layui-col-xs7">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                               for="LAY-user-login-vercode"></label>
                        <input type="text" name="code" id="LAY-user-login-vercode" lay-verify="required"
                               placeholder="图形验证码" class="layui-input">
                    </div>
                    <div class="layui-col-xs5">
                        <div style="margin-left: 10px;">
                            <img src="" class="layadmin-user-login-codeimg captcha" id="LAY-user-get-vercode">
                        </div>
                    </div> -->
                        <div id="captcha"></div>
                        <div id="msg"></div>
                        <!-- </div> -->
                        <!-- </div> -->
                        <div class="layui-form-item" style="margin-bottom: 20px;margin-top: 10px;">
                            <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
                            <!-- <a lay-href="/user/forget" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a> -->
                        </div>
                        <!-- <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid"  >立即登录</button>
                    </div> -->
                        <!-- <div class="layui-trans layui-form-item layadmin-user-login-other">
                            <a lay-href="/user/reg" class="adduser layadmin-user-jump-change layadmin-link">还没有账号?
                                立即注册</a>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="./src/controller/user/jigsaw.js"></script>
<script src="./jquery.min.js"></script>
<script>
    layui.use(['admin', 'user'], function () {
        var $ = layui.$
            , setter = layui.setter
            , router = layui.router()
            , search = router.search;
        // $('.captcha').attr('src', 'https://api2.juanpao.com/loginCaptcha?v='+ new Date().getTime());
        // form.render();
        var url = setter.baseUrl;
        //滑块验证
        jigsaw.init({
            el: document.getElementById('captcha'),
            onSuccess: function () {
                $('.pic').hide();
                // document.getElementById('msg').innerHTML = '验证成功！';
                var username = $('input[name=username]').val();
                var password = $('input[name=password]').val();
                var subData = {
                    username: username,
                    password: password
                }
                if (username == '' || password == '') {
                    return false;
                }
                //请求登入接口
                $.ajax({
                    url: url + '/adminLogin', //实际使用请改成服务端真实接口
                    data: subData,
                    xhrFields: {withCredentials: true},//携带cookie
                    type: 'post',
                    success: function (res) {
                        if (res.status != 200) {
                            layer.msg(res.message, {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            }, function () {
                                // location.reload();//刷新体验感很差
                            });
                            return;
                        }
                        //请求成功后，写入 access_token
                        layui.data(setter.tableName, {
                            key: setter.request.tokenName
                            , value: res.data
                        });
                        //登入成功的提示与跳转
                        layer.msg('登入成功', {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            sessionStorage.setItem("username", res.username);
                            location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
                        });
                    }
                });
            },
            onFail: cleanMsg,
            onRefresh: cleanMsg
        });
    });

    function cleanMsg() {
        document.getElementById('msg').innerHTML = ''
    }
</script>
<link type="text/css" rel="styleSheet" href="./src/style/user/jigsaw.css"/>
